<template>
	<view class="" style="height: 200rpx;border-radius: 10rpx;background: #FFFFFF;display: flex;box-shadow: 5px 2px 5px 2px rgba(189,189,189,0.2);margin-bottom: 10rpx;" v-for="item in List" @click="detail(item.id)">
		<view class=""
			style="min-width: 260rpx;height: 200rpx;border-radius: 10rpx 0rpx 0rpx 10rpx;">
			<image :src="item.image" style="width: 260rpx;height: 200rpx;border-radius: 10rpx 0rpx 0rpx 10rpx;" mode="aspectFill"></image>
		</view>
		<view class="right" >
			<view class="title">
				{{item.name}}
			</view>
			<view class="subtitle">
				{{item.introduce}}
			</view>
			<view class="price">
				<span style="font-size: 20rpx;">¥</span>{{item.price}}
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
 
	const props = defineProps({
		List: { type: Array as () => ListType[] }
	})
	const emit = defineEmits(['detail'])
	const detail = (id:number) => {
		emit('detail',id);
	}
</script>

<style scoped lang="scss">
	.right {
		margin-left: 20rpx;
		padding: 10rpx 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.title {
			font-size: 36rpx;
			font-weight: 500;
			color: #2C2C2C;
		}

		.subtitle {
			width: calc(690rpx - 290rpx);
			color: #787878;
			font-size: 28rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.price {
			color: #F00505;
			font-size: 32rpx;
		}
	}
</style>